<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

		<title>返回顶部</title>
		<style>
			/*returnTop*/
			
			p#back-to-top {
				position: fixed;
				display: none;
				bottom: 100px;
				right: 30px;
			}
			
			p#back-to-top a {
				text-align: center;
				text-decoration: none;
				color: #d1d1d1;
				display: block;
				/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
				-moz-transition: color .5s;
				-webkit-transition: color .5s;
				-o-transition: color .5s;
				font-size:10px;
			}
			
			p#back-to-top a:hover {
				color: #979797;
				font-size:10px;
			}
			
			p#back-to-top a span {
				background: transparent url(images/top01.png) no-repeat center;
				background-size:100% 100%;
				display: block;
				height: 40px;
				width: 40px;
				margin:0 auto 5px;
				/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
				-moz-transition: background .5s;
				-webkit-transition: background .5s;
				-o-transition: background .5s;
			}
			
			#back-to-top a:hover span {
				background: transparent url(images/top02.png) no-repeat center;
				background-size:100% 100%;
			}
		</style>
	</head>

	<body style="height:2000px;">

		<h1>返回顶部</h1>

		<p id="back-to-top">
			<a href="#top"><span></span>返回顶部</a>
		</p>
	</body>

	<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
	<script>
		$(function() {
			//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 
			$(function() {
				$(window).scroll(function() {
					if($(window).scrollTop() > 100) {
						$("#back-to-top").fadeIn(500);
					} else {
						$("#back-to-top").fadeOut(500);
					}
				});
				//当点击跳转链接后，回到页面顶部位置 
				$("#back-to-top").click(function() {
					$('body,html').animate({
						scrollTop: 0
					}, 500);
					return false;
				});
			});
		});
	</script>

</html>